/* eslint-disable object-curly-newline */
import React, { Component } from 'react';
import { Modal, Table } from 'antd';
import * as utils from '../../../utils/utils';
import * as comFunc from '../ComFunc';

class ModalList extends Component {
  constructor(props) {
    super(props);
    this.state = {
      modalListVisible: props.modalListVisible,
      scrollX: 1000,
      columns: [],
      data: [],
      selectedRowKeys: [], /* 选中行 */
      sMenuName: '', /* 弹窗标题 */
      copyFromConfig: {}, /* 复制从按钮配置 */
      slaveAssignData: [],
    };
  }

  componentWillReceiveProps(nextProps) {
    let { columns } = this.state;
    const { modalListData, modalListVisible } = nextProps;
    if (utils.isNotEmptyObject(modalListData) && modalListVisible) {
      const { formData, data, sMenuName, copyFromConfig } = modalListData;
      if (utils.isNotEmptyArr(formData)) {
        columns = comFunc.getListHeader(formData[0], columns);
        const scrollX = comFunc.getScrollX(columns);
        this.setState({
          scrollX,
          modalListVisible,
          columns,
          data,
          sMenuName,
          copyFromConfig,
        });
      }
    } else {
      this.setState({ modalListVisible });
    }
  }

  onSelectChange = (selectedRowKeys) => {
    const { data, copyFromConfig } = this.state;
    const slaveData = data.filter(item => selectedRowKeys.includes(item.key));
    const slaveAssign = [utils.returnObjValue(copyFromConfig.sAssignField)];
    const slaveAssignData = comFunc.getCopyToSlaveAssign(slaveData, slaveAssign, {});
    this.setState({ selectedRowKeys, slaveAssignData });
  };

  handleCancel = () => {
    this.setState({
      selectedRowKeys: [],
      modalListVisible: false,
    });
  };

  handleOk = () => {
    const { slaveAssignData } = this.state;
    this.setState({ selectedRowKeys: [] });
    this.props.onModalListData(slaveAssignData);
  };

  render() {
    const { modalListVisible, columns, data, scrollX, selectedRowKeys, sMenuName } = this.state;
    const rowSelection = {
      type: 'checkbox',
      selectedRowKeys,
      onChange: this.onSelectChange,
    };
    return (
      <Modal
        visible={modalListVisible}
        width={1000}
        title={sMenuName}
        onCancel={this.handleCancel}
        onOk={this.handleOk}
      >
        <div id="mergeTable">
          <Table
            bordered
            size="middle"
            pagination={false}
            columns={columns}
            dataSource={data}
            rowSelection={rowSelection}
            scroll={{ x: scrollX, y: 'calc(40vh)' }}
          />
        </div>
      </Modal>
    );
  }
}

export default ModalList;
